import React, { useState } from 'react';
import { Row, Col, Card, Modal } from 'antd';
import { Input, Layout } from 'antd';
import { DatePicker, Space } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio, Pagination } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import '../projectTeam/xmfz.css';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import { AudioOutlined, LinkOutlined } from '@ant-design/icons';
import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { Link } from 'umi';
import { Switch, Divider } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  BookOutlined,
  SnippetsOutlined,
  LineChartOutlined,
  CalendarOutlined,
  KeyOutlined,
} from '@ant-design/icons';
import request from '../../../http';

//搜索
const { Search } = Input;

const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
);

const onSearch = (value) => console.log(value);

//菜单
const { SubMenu } = Menu;

const Demo = () => {
  return (
    <>
      <Menu.Item key="1" icon={<MailOutlined />}>
        Navigation One
      </Menu.Item>
      <Menu.Item key="2" icon={<CalendarOutlined />}>
        Navigation Two
      </Menu.Item>
    </>
  );
};

const xmfz = (props: any) => {
  const [id, setId]: any = useState();

  const [data, setdata] = useState([{}]);

  // props.Callback(id);

  const columns = [
    {
      title: '小组名称',
      fixed: 'left',
      dataIndex: 'name',
      key: '1',
      render: (text: any, record: { name: React.Key; key: React.Key }) => (
        <Space size="middle">
          <a
            onClick={() => {
              propsID(record.groupId);
            }}
          >
            {record.name}
          </a>
        </Space>
      ),
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (text: any, record: { name: React.Key; key: React.Key }) => (
        <Space size="middle">
          <a>修改</a>
          <a>删除</a>
          <a>添加</a>
        </Space>
      ),
    },
  ];

  //传过去ID
  const propsID = (groupId: any) => {
    history.push({
      pathname: '/admin/projectTeam/index',
      query: {
        groupId: groupId,
      },
    });
  };

  //Get管理员遍历所有小组
  const [setGroupSelect, setgGroupSelect] = React.useState();

  React.useEffect(() => {
    const parms = {
      //请求参数
      //number: pagination.pageSize, //一页10行
      //page: pagination.current, //第一页
    };
    //调用公共的接口，填入请求的参数
    // loadDataSource(parms);

    //01 Get管理员遍历所有小组 缺请求参数
    request.get('/groupSelect/admin/AdminGroupSelect').then(
      (result: any) => {
        console.log('子组件 Get管理员遍历所有小组result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log(
            '子组件 Get管理员遍历所有小组result.data数据',
            result.data,
          );
          const setGroupSelect = result.data.map((item: any) => ({
            key: item.id,
            isGraduated: item.isGraduated,
            name: item.name,
            total: item.total,
            groupId: item.id,
          }));

          setgGroupSelect(setGroupSelect);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  }, []);

  const [value, setValue] = React.useState(1);
  const [isModalVisible, setIsModalVisible] = useState(false);

  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  //确认回调
  const handleOk = () => {
    setIsModalVisible(false);
    request
      .post('/groupSelect/admin/AdminGroupNew', {
        name: GroupName,
      })
      .then((res) => {
        console.log('新建分组请求成功了', res);
      });
  };

  //取消回调
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const [GroupName, setGroupName] = useState(0);

  return (
    <div>
      <div style={{ paddingLeft: '25px' }}>
        <div style={{ float: 'left', width: '90px', marginLeft: '0px' }}>
          <Button type="primary" onClick={showModal}>
            +新建分组
          </Button>
        </div>
        <div style={{ float: 'left', width: '90px', marginLeft: '15px' }}>
          <Button type="default" htmlType="submit">
            <a onClick={() => history.push('/admin/projectTeam/ckyjyfz')}>
              查看已结业分组
            </a>
          </Button>
        </div>
      </div>
      <div
        style={{
          width: '400px',
          clear: 'left',
          marginTop: '10px',
          paddingTop: '10px',
        }}
      >
        <Card title="项目分组" style={{ width: 300 }}>
          <p>
            <Button type="link">查看所有分组成员</Button>
          </p>
          <p>
            <Search
              placeholder="input search text"
              onSearch={onSearch}
              enterButton
            />
          </p>
          <div>
            <Table
              columns={columns}
              dataSource={setGroupSelect}
              scroll={{ x: 1500, y: 300 }}
            />
          </div>
        </Card>
      </div>

      <Modal
        title="项目分组"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <p>小组名称</p>
        <Input
          onChange={(e) => {
            // console.log(e.target.value)
            const str = e.target.value;
            setGroupName(str);
          }}
        ></Input>
        <p style={{ marginTop: 20 }}>是否已结业</p>
        <Radio.Group onChange={onChange} value={value}>
          <Radio value={1}>是</Radio>
          <Radio value={0}>否</Radio>
        </Radio.Group>
      </Modal>
    </div>
  );
};

export default xmfz;
